<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                     <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/basics/logistics' }">基础管理</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/basics/logistics' }">类型管理</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                    
            </el-col>
        </el-row>
       
        <!-- 搜索筛选 -->
        <!-- <el-form :inline="true" :model="goods" class="user-search">  
            <el-form-item label="搜索：">
                <el-input size="small" v-model="goods.logisticsNum" placeholder="输入订单号"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-input size="small" v-model="goods.logisticsUserName" placeholder="输入客户名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form-item>
        </el-form> -->
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark" style="text-align: left; margin: 5px 0">
                    <el-button size="small" type="primary" icon="el-icon-plus" @click="addHandleEdit">添加</el-button>   
                </div>
            </el-col>
        </el-row>
       
       <!--列表-->
       <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                   <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 90%;">
                    <el-table-column sortable prop="goods_class_id" label="类别号" width="170">
                    </el-table-column>
                    <el-table-column sortable prop="goods_class_name" label="商品类别名" width="170">
                    </el-table-column>
                    <el-table-column sortable prop="goods_class_detail" label="商品类别描述" width="200">
                    </el-table-column>
                    <el-table-column align="center" label="操作" min-width="200" fixed="right">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)" plain>编辑</el-button>
                            <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)" plain>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                </div>
            </el-col>
        </el-row>
       
         <!-- 分页组件 -->
        <el-pagination class="page-box" 
            @size-change="handleSizeChange" 
            @current-change="handleCurrentChange" 
            background 
            :current-page="currentPage" 
            :page-sizes="[10, 20, 30, 40]" 
            :page-size="pageSize"  
            :total="total">
        </el-pagination>
        <!-- 编辑界面 -->
        <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
            <el-form label-position="left" label-width="120px" :model="editForm" :rules="rules" ref="editForm">
                <el-form-item label="商品类别名称" prop="goods_class_name">  
                    <el-input size="small" v-model="editForm.goods_class_name" auto-complete="off" placeholder="请输入商品名称"></el-input>
                </el-form-item>
                <el-form-item label="商品类别描述" prop="goods_class_detail">
                    <el-input size="small" v-model="editForm.goods_class_detail" auto-complete="off" placeholder="商品类别描述"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeDialog">取消</el-button>
                <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';

export default {
   
    name: "Classs",
    data() {
        return {
            loading: false, //是显示加载,
            pageSize: 6,   //页数
            currentPage: 1,  //当前页,
            total: 2,  //总页数
            editFormVisible: false, //控制编辑页面显示与隐藏
            dist: "", //区别唯一标识符  add 添加  del删除  edit编辑
            distNum: "",  //编辑的第几条数据
            dataStore: [],  //old 数据存储
            goods: {
                logisticsNum: "",
                logisticsUserName: "",
            },
            user_id: '',
            listData: [ 
                {
                    logisticsNo: 1001, //序号
                    logisticsNum: "订单号1",
                    logisticsUserName: "客户名称",
                    logisticsStart: "发货地1",
                    logisticsEnd: "目的地1",
                    logisticsSendDate: "发货日期1",
                    logisticsActive: "预计到达日期",
                    logisticsCompany: "物流公司",
                    logisticsMoney: "物流运费",
                    logisticsRemark: "备注"
                }
            ],
            //提交或者编辑的数据
            editForm: {
                goods_class_id: "",
                goods_class_name: "",
                goods_class_detail: ""
               
            },
            title: '编辑',
            rules: {
                goods_class_name: [{ required: true, message: '请输入商品类别名称', trigger: 'blur' }],
                // goods_class_detail: [{ required: true, message: '请输入商品类别描述', trigger: 'blur' }]
            },
            searchArr: []
        }
    },
    methods: {
        search() {
            //每次搜索前将旧的数据恢复
            // this.listData = this.dataStore;
            //根据商品代码或者商品名称检索 满足其中一个即可
            let deptNo = this.goods.logisticsNum;
            let deptName = this.goods.logisticsUserName;
            if(deptName == '' && deptNo == '') {
                this.handleCurrentChange(1);
                 this.total = this.dataStore.length;
                return;
            }
            let newArr = [];
            let reg = new RegExp(deptName);

            this.dataStore.forEach((elem, index) => {
                //名称模糊匹配
                
                // if(deptName == elem.logisticsNum || deptNo == elem.logisticsUserName) newArr.push(elem)
                //  if (deptName == elem.logisticsUserName || deptNo == elem.logisticsNum) newArr.push(elem)
                if(deptName == '') {
                    if (deptNo == elem.logisticsNum) newArr.push(elem)
                } else
                 if(reg.test(elem.logisticsUserName) || deptNo == elem.logisticsNum) {
                    newArr.push(elem)
                }
                
            })
            this.listData = newArr;
            this.total = newArr.length;
            this.currentPage = 1;
        },
        //add
        addHandleEdit() {
            this.dist = "add";
            this.editFormVisible = true;
            

        },
        // 编辑
        handleEdit(index, row) {
            this.title = "编辑";
            this.dist = "edit";
            this.distNum = index;
            this.editFormVisible = true;
           

            //数据渲染到dialog   goods_class_name: "",  goods_class_detail: ""
            this.editForm.goods_class_id = row.goods_class_id;
            this.editForm.goods_class_name = row.goods_class_name;    
            this.editForm.goods_class_detail = row.goods_class_detail;
           
            
            // console.log( this.editForm)

        },
        handleSizeChange(val) {
           this.pageSize = val 
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            let pageSize = this.pageSize;
            let da = this.dataStore;
            let i = (val - 1) * pageSize;
            let arr = da.slice(i , i + pageSize);
            this.listData = arr;

        },
        //提交保存
        submitForm(editData) {
            this.$refs[editData].validate(valid => {
                // console.log(newStampChangeFormat());
                if (valid) {
                    if (this.dist == "add") {
                        // // console.log("submitForm", this.editForm)
                        // this.listData.push({
                        //     goods_class_name: this.editForm.goods_class_name,  //商品类别名称
                        //     goods_class_detail: this.editForm.goods_class_detail,            //商品类别描述
                        //    
                        // })
                         axios.post("/goods/class/add", {
                             data: {
                                user_id: this.user_id,
                                goods_class_name: this.editForm.goods_class_name,      //商品类别名称
                                goods_class_detail: this.editForm.goods_class_detail,   //商品类别描述
                             }
                         }).then(res => {
                             if(res.data.data) {
                                  this.$message({
                                    showClose: true,
                                    type: 'success',
                                    message: '添加成功!'
                                })
                                this.getList();  
                                // location.reload(true); // 强制从服务器刷新页面
                             } else {
                                 this.$message.error('添加失败');
                             }
                         })
                        
                    } else if(this.dist == "edit") {
                        // console.log(this.listData[this.distNum])  goods_class_name: "",  goods_class_detail: ""
                        this.listData[this.distNum].goods_class_name = this.editForm.goods_class_name;
                        this.listData[this.distNum].goods_class_detail = this.editForm.goods_class_detail;
                        

                        let position = this.pageSize * (this.currentPage - 1 ) + this.distNum;
                        this.dataStore[position].logisticsUserName = this.editForm.goods_class_name;
                        this.dataStore[position].logisticsEnd = this.editForm.goods_class_detail;
                       
                       axios.put("/goods/class/upd", {
                             data: {
                                goods_class_id: this.editForm.goods_class_id,
                                goods_class_name: this.editForm.goods_class_name,      //商品类别名称
                                goods_class_detail: this.editForm.goods_class_detail,   //商品类别描述
                             }
                         }).then(res => {
                             if(res.data.data) {
                                  this.$message({
                                    showClose: true,
                                    type: 'success',
                                    message: '修改成功!'
                                })
                                this.getList();  
                                // location.reload(true); // 强制从服务器刷新页面
                             } else {
                                 this.$message.error('修改失败');
                             }
                         })
                        
                    }
                    
                    //清空内容
                    this.elearData()
                    //关闭dialog
                    this.editFormVisible = false;
                    
               


                } else {
                    return false
                }
            })
        },
        //关闭dialog
        closeDialog() {
            this.editFormVisible = false;
            //数据清空
            this.elearData()
        },
        //删除
        deleteUser(index, row) {
            this.dist = "del"
            console.log(index, row);
            this.$confirm(' 是否删除?', '提示', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
            }) .then(() => {

                // /goods/class/del
                axios.post("/goods/class/del", {
                     data: {
                        goods_class_id: row.goods_class_id
                     }
                 }).then(res => {
                     if(res.data.data) {
                          this.$message({
                            showClose: true,
                            type: 'success',
                            message: '删除成功!'
                        })
                        this.getList();  
                        // location.reload(true); // 强制从服务器刷新页面
                     } else {
                         this.$message.error('删除失败');
                     }
                 })
            // setTimeout(() => { bug
                // setTimeout(() => {
                //     //根据商品代码检索到对应数据remove  splice
                    
                //     this.dataStore.forEach((element, i) => {
                //         if (element.logisticsNum == row.logisticsNum) {
                //             //找到商品
                //             this.listData.splice(index, 1);
                //             this.dataStore.splice(i, 1);
                //             this.total -= 1;
                //             this.handleCurrentChange(this.currentPage); 
                //             this.$message({
                //                 showClose: true,
                //                 type: 'success',
                //                 message: '删除成功!'
                //             })
                //             return false;
                //         }    
                //     })
                    
                // }, 1000)
            
            }, 1000)
            .catch(() => {
                this.$message({
                type: 'info',
                message: '已取消'
            })
          })
            
            

        },
        elearData() {
        
            this.editForm.goods_class_name = "";    
            this.editForm.goods_class_detail = "";
          
        },
        getList() {
            let getlocal = localStorage.getItem("localUser");
            this.user_id = JSON.parse(getlocal).user_id;
            axios.get("/goods/mer/list", {
                 params: {
                     user_id: this.user_id
                 }
            })
            .then(
                res => {
                    this.dataStore = res.data.data;
                    this.handleCurrentChange(1); 
                    this.total = res.data.data.length;
                }
            )
        }
    },
    created() {
        this.getList();  
        
    }
}
</script>

<style scoped>
.el-form {
    margin: 0;
    padding: 0;
    text-align: left;
}
.el-pagination {
    margin-top: 20px;
}
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}

.editForms {
    text-align: left;
}
</style>